import React, { useState } from 'react';
import { Form, Table, Button, Input, message } from 'antd'
import trans from '@/utils/translate';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
const { Item } = Form;
interface Props {
  ports: port[];
  setPorts?: any;
}
interface port {
  id: number;
  key: number|string;
  value: number|string;
}
const PortMapping: React.FC<Props> = (props) => {
  const { ports, setPorts } = props;
  const [index, setIndex] = useState(-1);
  const columnsPort = [
    {
      title: trans('deployOnline.edgeInference.add.portType'),
      render: (text: string, record: port, index: number) => {
        return trans(`deployOnline.edgeInference.add.${index === 0 ? 'inferPort' : 'otherPort'}`)
      }
    },
    {
      title: trans('deployOnline.edgeInference.add.containerPort'),
      dataIndex: 'key',
      render: (text: string, record: port, index: number) => (
        <Item style={{ marginBottom: 'unset' }} rules={[
          {
            required: !index,
          },
          ({ getFieldValue }) => ({
            validator(_, value) {
              console.log(ports.map(p => p.key).includes(value));
              if (ports.map(p => p.key).includes(value)) {
                return Promise.reject(new Error('error'));
              }
              return Promise.resolve();
            }
          })
        ]}>
          <Input
            placeholder={trans(`deployOnline.edgeInference.add.${index>0?'containerPortTip':'inferPortTip'}`)}
            onChange={(e) => {updatePort('key', index, e.target.value)}}/>
        </Item>
      )
    },
    {
      title: trans('deployOnline.edgeInference.add.hostPort'),
      dataIndex: 'value',
      render: (text: string, record: port, index: number) => (
        <Item style={{ marginBottom: 'unset' }}>
          <Input
            placeholder={trans('deployOnline.edgeInference.add.hostPortTip')}
            onChange={(e) => {updatePort('value', index, e.target.value)}} />
        </Item>
      )
    },
    {
      title: trans('common.operation'),
      render: (text: string, record: port, index: number) => {
        return index > 0 && <Button onClick={()=>deletePort(index)} icon={<DeleteOutlined />}></Button>
      }
    },
  ];

  const addPort = () => {
    setPorts([...ports, { key: '', value: '', id: Date.now()}])
  }
  const updatePort = (text: string, index: number, value: string|number) => {
    setIndex(index);
    // 容器端口不能一致，主机端口也不能一致
    const temp = ports.map(port => port[text]);
    if (temp.includes(value)) message.error('端口不能重复')
    const portsTemp = [...ports];
    portsTemp[index][text] = value;
    setPorts(portsTemp);
    console.log(ports);
  }
  const deletePort = (index: number) => {
    const portsTemp = [...ports];
    portsTemp.splice(index, 1);
    setPorts(portsTemp);
  }

  return (
    <Item
      label={trans('deployOnline.edgeInference.add.portMapping')}
      labelAlign='left'
      required
      tooltip={trans('deployOnline.edgeInference.add.portMapping.tip')}
    >
      <Table
        size='small'
        columns={columnsPort}
        dataSource={ports}
        pagination={false}
        rowKey={row => row.id}
      ></Table>
      <div>
        <Button
          disabled={!ports[0].key || !ports[0].value}
          type="text"
          icon={<PlusOutlined />}
          size="middle"
          onClick={() => {
            addPort();
          }}
        >
          {trans('deployOnline.edgeInference.add.AddPortMapping')}
        </Button>
      </div>
    </Item>
  )
}

export default PortMapping;
